<template>
	<view class="cont">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">通知公告</block>
			<block slot="right">
				新建
			</block>
		</cu-custom>
		<!-- <view style="background-color: #222222; width: 100%; height: 1px;"></view> -->
		<dropdown-menu>
			<dropdown-item title="全部通知(0)" ref="rangeDropdown">
				<view>我是自定义范围内容</view>
				<view>我是自定义范围内容</view>
				<view>我是自定义范围内容</view>
			</dropdown-item>
			<!-- <dropdown-item title="日期" ref="dateDropdown">
		        <view>我是自定义日期内容</view>
		        <view>我是自定义范围内容</view>
		    </dropdown-item>
		  <dropdown-item title="项目" ref="projectDropdown">
		        <view>我是自定义项目内容</view>
		        <view>我是自定义范围内容</view>
		        <view>我是自定义范围内容</view>
		        <view>我是自定义范围内容</view>
		        <view>我是自定义范围内容</view>
		    </dropdown-item> -->
		</dropdown-menu>

		<scroll-view class="scroll-Y" scroll-y="true">
			<uni-card-notice v-for="(notice, index) in noticeList" :key="index" :title="notice.title" :extra="notice.extra" isShadow :note="notice.date" @click="clickCard">
				<text class="content-box-text">{{index+'- '+notice.content}}</text>
			</uni-card-notice>
			<!-- <uni-card-notice title="【教师通知】" extra="" isShadow note="2020-07-12 18:53:23" @click="clickCard">
				<text class="content-box-text">正安县第三中学2020-2021学年度第一学期九年级开学通知</text>
			</uni-card-notice>
			<uni-card-notice title="【家长通知】" extra="未阅" isShadow note="2020-07-12 18:53:23" @click="clickCard">
				<text class="content-box-text">关于八、九年级家长本学期未收到学生进出校的通知</text>
			</uni-card-notice>
			<uni-card-notice title="【家长通知】" extra="未阅" isShadow note="2020-07-12 18:53:23" @click="clickCard">
				<text class="content-box-text">关于八、九年级家长本学期未收到学生进出校的通知</text>
			</uni-card-notice>
			<uni-card-notice title="【家长通知】" extra="未阅" isShadow note="2020-07-12 18:53:23" @click="clickCard">
				<text class="content-box-text">关于八、九年级家长本学期未收到学生进出校的通知</text>
			</uni-card-notice> -->
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</scroll-view>
		<!-- <view>asasd</view> -->
		<!-- <view class="menu-view">
			<HMfilterDropdown :menuTop="0" :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true"
			 @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
		</view> -->

	</view>
</template>

<script>
	
	import DropdownMenu from '@/components/JP-dropdown-menu/JP-dropdown-menu.vue';
	import DropdownItem from '@/components/JP-dropdown-menu/JP-dropdown-item.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	// import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import data from '@/common/data.js'; //筛选菜单数据
	export default {
		components: {
			DropdownMenu,
			DropdownItem,
			uniLoadMore
			// 'HMfilterDropdown': HMfilterDropdown
		},
		created() {},
		onLoad(options) {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				this.filterData = data;
				//设置选中项
				// 一下的注释是针对测试数据说明结构的意思，具体传入什么数据，要看你自己数据。如果data.js数据有修改，注意defaultSelected也要修改
				//传入defaultSelected的结构不能错，错了就报错运行异常。 不想选中的请传入null
				// this.defaultSelected = [
				// 	[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
				// 	[null,null],			//第1个菜单选中 都不选中
				// 	[1],					//第2个菜单选中 一级菜单的第1项
				// 	[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
				// 	[[0],[1],[1]]			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
				// ];
			}, 100);

		},
		data() {
			return {

				indexArr: '',
				valueArr: '',
				loadingText: "正在加载...",
				defaultSelected: [],
				filterData: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				noticeList: [
					{
						noticeId: 0,
						title: '【全校通知】',
						extra: '未阅',
						date: '2020-07-12 18:53:23',
						content: '关于公需科目学习的通知'
					},
					{
						noticeId: 0,
						title: '【教师通知】',
						extra: '',
						date: '2020-07-12 18:53:23',
						content: '正安县第三中学2020-2021学年度第一学期九年级开学通知'
					},
					{
						noticeId: 0,
						title: '【家长通知】',
						extra: '',
						date: '2020-07-12 18:53:23',
						content: '关于八、九年级家长本学期未收到学生进出校的通知'
					},
					{
						noticeId: 0,
						title: '【教师通知】',
						extra: '未阅',
						date: '2020-07-12 18:53:23',
						content: '关于公需科目学习的通知'
					},
					{
						noticeId: 0,
						title: '【全校通知】',
						extra: '未阅',
						date: '2020-07-12 18:53:23',
						content: '正安县第三中学2020-2021学年度第一学期九年级开学通知'
					},
					{
						noticeId: 0,
						title: '【全校通知】',
						extra: '未阅',
						date: '2020-07-12 18:53:23',
						content: '关于公需科目学习的通知'
					},
					{
						noticeId: 0,
						title: '【教师通知】',
						extra: '',
						date: '2020-07-12 18:53:23',
						content: '正安县第三中学2020-2021学年度第一学期九年级开学通知'
					},
				]
			}
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			//接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;

			},
			//修改选中项-示例
			changeSelected() {
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[1, 1, 0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null, null], //第1个菜单选中 都不选中
						[1], //第2个菜单选中 一级菜单的第1项
						[
							[0],
							[1, 2, 7],
							[1, 0]
						], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[
							[0],
							[1],
							[1]
						] //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			clickCard() {
				uni.navigateTo({
					url: './notice_details/notice_details'
				})
			},
			getList() {
				this.status = 'loading';
				//定时器模拟ajax异步请求数据
				setTimeout(() => {
					this.noticeList = this.noticeList.concat(this.noticeList);
					this.reload = false;
				}, 1000);
				
				// var data = {
				// 	column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				// };
				// if (this.last_id) {
				// 	//说明已有数据，目前处于上拉加载
				// 	this.status = 'loading';
				// 	data.minId = this.last_id;
				// 	data.time = new Date().getTime() + '';
				// 	data.pageSize = 10;
				// }
				// uni.request({
				// 	url: 'https://unidemo.dcloud.net.cn/api/news',
				// 	data: data,
				// 	success: data => {
				// 		if (data.statusCode == 200) {
				// 			let list = this.setTime(data.data);
				// 			this.listData = this.reload ? list : this.listData.concat(list);
				// 			this.last_id = list[list.length - 1].id;
				// 			this.reload = false;
				// 		}
				// 	},
				// 	fail: (data, code) => {
				// 		console.log('fail' + JSON.stringify(data));
				// 	}
				// });
			},
		}

	}
</script>

<style>
	page {
		height: 100%;
		background-color: #ffffff;
	}

	/* .menu-view {
		background-color: #007AFF;
		width: 100%;
		height: 100px;
		position: relative;
		display: flex;
	} */

	.dropdown-menu {
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
		/* background-color: #F5F5F5; */
	}

	.scroll-Y {
		/* -webkit-flex: 1; */
		/* flex: 1; */
		/* flex-direction: column; */
		/* flex-wrap: wrap; */
		/* justify-content: center; */
		padding: 10px 0;
		/* width: calc(100% - 100px); */
		/* font-size: 14px; */
		height: 10%;
	}

	.content-box-text {
		font-size: 15px;
		font-weight: 500;
		line-height: 22px;
	}
</style>
